import React from 'react'
import { Input, Button,Form,message  } from "antd"
import "./login.scss"
const phoneTest = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
function validatePrimeNumber(number,type) {
  
  
  var flag  = phoneTest.test(number)
  var errorMsg = "请输入正确的手机号"
  if(type == "pass"){
    flag = number.length > 6 
    errorMsg = "请输入正确格式密码"
  }
  if (flag) {
    return {
      validateStatus: 'success',
      errorMsg: null,
    };
  }
  return {
    validateStatus: 'error',
    errorMsg: errorMsg,
  };
  
}
export default class Login extends React.Component {
 
  constructor() {

    super()

    this.state = {
      type:"手机号",
      phone:{
        value:"",
      },
      password:{
        value:"",
      }
    }

  }

  componentWillReceiveProps (props) {
    console.log(props)
    this.setState({
      type:props.type
    })

  }

  handleNumberChange = (e) => {
    const value = e.target.value
    this.setState({
      phone: {
        ...validatePrimeNumber(value,'phone'),
        value,
      },
    });
  }

  handlePasswordChange = (e) => {
    const value = e.target.value
    this.setState({
      password: {
        ...validatePrimeNumber(value,'pass'),
        value,
      },
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // console.log(this.props.form.validateFields)
    this.props.form.validateFields((err, values) => {
     console.log(err)
     if(values.userName == '' || values.password == ''){
       message.info('This is a normal message');
     }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const {phone,password} = this.state;
    return <div id="login">

      <div className="main">
        <Form ref="form" onSubmit={this.handleSubmit}>
          
          <Form.Item
            label={this.state.type}
            validateStatus={phone.validateStatus}
            hasFeedback
            help={phone.errorMsg}
          >
            {
            getFieldDecorator('userName')(
              <Input
              min={8}
              max={12}
              placeholder="请输入账号"
              onChange={this.handleNumberChange}
              />
             )
            }
            
          </Form.Item>
          <Form.Item
            label="密码"
            validateStatus={password.validateStatus}
            hasFeedback
            help={password.errorMsg}
          >
            {
            getFieldDecorator('password')(
              <Input
              type="password"
              placeholder="请输入密码"
              onChange={this.handlePasswordChange}
            />
             )
            }
            
          </Form.Item>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form>
        {/* <div style={{ marginBottom: 16 }}>
          <Input addonBefore={this.state.type} defaultValue="mysite" />
        </div>
        <div style={{ marginBottom: 16 }}>
          <Input addonBefore="密码" defaultValue="mysite" />
        </div> */}
        
      </div>
    
    </div>
  }
}

Login = Form.create({ name: 'normal_login' })(Login);
